<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="./js/vue.js"></script>
    <style>
        div>div {
            width: 60px;
            height: 60px;
            border: 2px solid #bbb;
            text-align: center;
            line-height: 60px;
            font-size: 30px;
            margin: 10px;
            float: left;
        }

        .selected {
            border-color: #000;
        }

        .active {
            background-color: #bbb;
        }
    </style>
</head>

<body>
    <div id="app">
        <div>1</div>
        <div class="selected">2</div>
        <div class="active">3</div>
        <div class="selected active">4</div>
        <p>——</p>
        <p>——</p>
        <p>——</p>

        <!-- v-bind绑定某个属性值 -->
        <div v-bind:class="{selected:div1.selected,active:div1.active}">11</div>
        <div v-bind:class="{selected:div2.selected,active:div2.active}">12</div>
        <!-- 直接绑定我们的属性对象 -->
        <div v-bind:class="div3" >13</div>
        <!-- v-bind的简写‘：’ -->
        <div :class="div4">14</div>
        <p>——</p>
        <p>——</p>
        <p>——</p>


        <div :class="suijifangfa()">11</div>
        <div :class="suijifangfa()">12</div>

        <div :class="suijishuxing">13</div>

        <div :class="suijishuxing">14</div>
          <p>——</p>
        <p>——</p>
        <p>——</p>


        <div :class="[classname1,classname2]">11</div>
         <div :class="[isAcative?'active':'selected']">11</div>
         <div :class="[{active:classname3},classname1]">11</div>
        
    </div>
    <script>
        function ruiji(){
            return Boolean(Math.round(Math.random()))
        }
        Vue.createApp({
            // v-bind 用于绑定dom属性 class  /style
            data() {
                return {
                    div1: { selected: false, active: false },
                    div2: { selected: true, active: false },
                    div3: { selected: false, active: true },
                    div4: { selected: true, active: true },
                    classname1:"selected",
                    classname2:"active",
                    isAcative:true,
                    classname3:false

                }
            },
            methods: {
                suijifangfa(){
                    return{selected:ruiji(),active:ruiji()}
                }
            },
            component:{
                suijishuxing(){
                    return{selected:ruiji(),active:ruiji()}
                }
            }
        }).mount('#app')
    </script>
</body>

</html>